<template>
    <div class="comment_container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入内容" v-model="content"></textarea>
        <mt-button type="primary"  size="large" @click="postcomment">发表评论</mt-button>
        <div class="comment_floor" v-for="(item,i) in comments" :key="i">
            <div class="flrInfo">第{{i+1}}楼  用户:{{item.user_name}}  发表时间:{{item.add_time | dateFormat}}</div>
            <div class="flrContent">{{item.content}}</div>
        </div>
        <mt-button type="danger" size="large" plain @click="loadmore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            pageindex:1,
            comments:[],
            content:''
        }
    },
    created(){
        this.getcomments()
    },
    methods:{
        // 获取评论列表
        getcomments(){
            this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(result=>{
                if(result.body.status === 0) {
                    // this.comments = result.body.message
                    // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
                    this.comments = this.comments.concat(result.body.message)
                } else {
                    Toast('获取评论列表失败')
                }
            })
        },
        // 加载更多按钮事件
        loadmore(){
            this.pageindex++
            // 调用加载评论方法
            this.getcomments()
        },
        // 提交评论
        postcomment(){
            // 校验content是否为空
            if(this.content.trim() === ''){
                return Toast('请输入内容')
            }
            this.$http
            .post('api/postcomment/'+this.id, {content:this.content})
            .then(result=> {
                var cmt = {
                    add_time:new Date(),
                    content: this.content,
                    user_name:'灯火暗'
                }
                this.comments.unshift(cmt)
                this.content = ''
            })
        }
        
    },
    props:['id']
}
</script>

<style lang="less">
   .comment_container{
       h3 {
           font-size: 16px;
       }
       textarea{
           font-size: 14px;
       }
       .comment_floor{
           font-size: 12px;
           padding: 5px 0;
           .flrInfo{
               background-color: #bbb;
               padding: 5px 0;
           }
           .flrContent{
               padding-left: 15px;
               height: 30px;
               line-height: 30px;
           }
       }
   }
</style>